<template>
	<view class="page">
		<view class="h2">
			零基础入门uniapp
		</view>
		<view class="p">
			教程内容源自咸虾米，内容主要内容为uniapp Vue3组合式API基础教程和咸虾米壁纸项目实战。学习笔记 By 李哒胖子
		</view>
		<uni-collapse accordion>
			<uni-collapse-item title="第二章-常用的内置组件">
				<uni-list>
					<navigator url="/pages/two/2-1">
						<uni-list-item title="2.1.view和text常用视图容器组件"></uni-list-item>
					</navigator>
					<navigator url="/pages/two/2-2">
						<uni-list-item title="2.2.scroll-view可滚动视图区域组件"></uni-list-item>
					</navigator>
					<navigator url="/pages/two/2-3">
						<uni-list-item title="2.3.swiper滑块视图容器的用法"></uni-list-item>
					</navigator>
					<navigator url="/pages/two/2-4">
						<uni-list-item title="2.4.image媒体组件属性配合swiper轮播"></uni-list-item>
					</navigator>
					<navigator url="/pages/two/2-5">
						<uni-list-item title="2.5.navigator路由与页面跳转"></uni-list-item>
					</navigator>
					<navigator url="/pages/two/2-6">
						<uni-list-item title="2.6.常用的表单组件button和input"></uni-list-item>
					</navigator>
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="第三章-vue3组合式API快速上手">
				<uni-list>
					<navigator url="/pages/three/3-1">
						<uni-list-item title="3.1.vue3的模板语法插值表达式用法"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-2">
						<uni-list-item title="3.2.使用ref定义响应式数据变量"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-3">
						<uni-list-item title="3.3.v-bind指令配合图片轮播案例"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-4">
						<uni-list-item title="3.4.class类和style内联样式的绑定"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-5">
						<uni-list-item title="3.5.原生事件监听及组件内置事件处理"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-7">
						<uni-list-item title="3.7.v-if条件渲染及v-show的选择对比"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-8">
						<uni-list-item title="3.8.v-for列表渲染的用法"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-9">
						<uni-list-item title="3.9.【购物车案例】for循环为什么使用key"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-10">
						<uni-list-item title="3.10.【B站登录案例】表单focus和blur事件用法"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-11">
						<uni-list-item title="3.11.v-model双向绑定的实现原理"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-12">
						<uni-list-item title="3.12.【热梗案例】知识点阶段性综合汇总"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-13">
						<uni-list-item title="3.13.computed计算属性用法及方法对比"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-9">
						<uni-list-item title="3.14.【计价案例】计算属性配合循环遍历统计总价"></uni-list-item>
					</navigator>
					<navigator url="/pages/three/3-15">
						<uni-list-item title="3.15.watch和watchEffect监听的使用"></uni-list-item>
					</navigator>
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="第四章-深入vue组件及生命周期">
				<uni-list>
					<navigator url="/pages/four/4-1">
						<uni-list-item title="4.1.uniapp创建组件和vue官方文档的差异对比"></uni-list-item>
					</navigator>
					<navigator url="/pages/four/4-2">
						<uni-list-item title="4.2.在组件中通过Props进行数据传递"></uni-list-item>
					</navigator>
					<navigator url="/pages/four/4-3">
						<uni-list-item title="4.3.Prop校验与prop默认值用法及循环遍历数组对象"></uni-list-item>
					</navigator>
					<navigator url="/pages/four/4-4">
						<uni-list-item title="4.4.插槽Slots及具名插槽实现组件高度定制化"></uni-list-item>
					</navigator>
					<navigator url="/pages/four/4-5">
						<uni-list-item title="4.5.组件中emit的声明触发事件"></uni-list-item>
					</navigator>
					<navigator url="/pages/four/4-6">
						<uni-list-item title="4.6.vue3组合式API中的组件的生命周期函数（钩子函数）"></uni-list-item>
					</navigator>
					<navigator url="/pages/four/4-7">
						<uni-list-item title="4.7.使用defineExpose暴漏子组件的属性及方法"></uni-list-item>
					</navigator>
					<navigator url="/pages/four/4-8">
						<uni-list-item title="4.8.页面生命周期onLoad和onReady在vue3组合式api中的使用"></uni-list-item>
					</navigator>
					<navigator url="/pages/four/4-9">
						<uni-list-item title="4.9.onShow和onHide钩子的对比和执行顺序"></uni-list-item>
					</navigator>
					<navigator url="/pages/four/4-10">
						<uni-list-item title="4.10.onUnload页面卸载和onPageScroll监听页面滚动"></uni-list-item>
					</navigator>
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="第五章-uniapp全局文件配置和API调用">
				<uni-list>
					<navigator url="/pages/five/5-1">
						<uni-list-item title="5.1.响应式单位rpx及搭配使用UI产品工具"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-2">
						<uni-list-item title="5.2.@import导入css样式及scss变量用法与static目录"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-3">
						<uni-list-item title="5.3 pages.json页面路由globalStyle的属性"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-4">
						<uni-list-item title="5.4.pages设置页面路径及窗口表现"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-5">
						<uni-list-item title="5.5.tabBar设置底部菜单选项及iconfont图标"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-6">
						<uni-list-item title="5.6.manifest.json配置和注册微信小程序appid"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-7">
						<uni-list-item title="5.7.安装插件unplugin-auto-import自动导入vue和uniapp模块"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-8">
						<uni-list-item title="5.8.uni-api交互反馈showToast的用法"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-9">
						<uni-list-item title="5.9.showLoading加载和showModal模态框示例"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-10">
						<uni-list-item title="5.10.showActionSheet从底部向上弹出操作菜单"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-11">
						<uni-list-item title="5.11.动态设置页面导航条的样式"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-12">
						<uni-list-item title="5.12.setTabBar设置TabBar和下拉刷新API"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-13">
						<uni-list-item title="5.13.页面和路由API-navigateTo及页面栈getCurrentPages"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-14">
						<uni-list-item title="5.14.StorageSync数据缓存API"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-15">
						<uni-list-item title="5.15.uni.request发送网络请求"></uni-list-item>
					</navigator>
					<navigator url="/pages/five/5-16">
						<uni-list-item title="5.16.request各种不同类型的参数详解"></uni-list-item>
					</navigator>
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="第六章-阶段性综合小实例-萌宠集">
				<uni-list>
					<navigator url="/pages/six/6-1">
						<uni-list-item title="淘宝卖家秀案例"></uni-list-item>
					</navigator>
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="第七章-咸虾米壁纸项目实战">
				<uni-list>
					<navigator url="/pages/seven/7-1">
						<uni-list-item title="7.1.咸虾米壁纸项目概述"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-2">
						<uni-list-item title="7.2.项目初始化公共目录和设计稿尺寸测量工具"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-3">
						<uni-list-item title="7.3.banner海报swiper轮播器"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-4">
						<uni-list-item title="7.4.使用swiper的纵向轮播做公告区域"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-5">
						<uni-list-item title="7.5.每日推荐滑动scroll-view布局"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-6">
						<uni-list-item title="7.6.组件具名插槽定义公共标题模块"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-7">
						<uni-list-item title="7.7.细节拉满磨砂背景定位布局做专题组件"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-8">
						<uni-list-item title="7.8.同一组件Props传递不同属性值展示不同效果"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-9">
						<uni-list-item title="7.9.设置项目底部tab页面切换标签"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-10">
						<uni-list-item title="7.10.个人中心页面布局"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-11">
						<uni-list-item title="7.11.ifdef条件编译实现多终端匹配和客服消息"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-12">
						<uni-list-item title="7.12.设置页面全局渐变线性渐变背景色"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-13">
						<uni-list-item title="7.13.定义scss颜色变量deep()修改子组件css样式"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-14">
						<uni-list-item title="7.14.创建分类列表完成各页面的跳转"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-15">
						<uni-list-item title="7.15.全屏页面absolute定位布局和fit-content内容宽度"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-16">
						<uni-list-item title="7.16.遮罩层状态转换及日期格式化"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-17">
						<uni-list-item title="7.17.uni-popup弹窗层制作弹出信息内容效果"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-18">
						<uni-list-item title="7.18.评分弹出框uni-rate组件的属性方法"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-19">
						<uni-list-item title="7.19.自定义头部导航栏布局"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-20">
						<uni-list-item title="7.20.获取系统信息getSystemInfo状态栏和胶囊按钮"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-21">
						<uni-list-item title="7.21.抽离公共方法用条件编译对抖音小程序适配"></uni-list-item>
					</navigator>
					<navigator url="/pages/seven/7-22">
						<uni-list-item title="7.22.完善页面布局实现各个页面的串联"></uni-list-item>
					</navigator>
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="第八章-封装网络请求对接各个页面的真实接口">
				<uni-list>
					<navigator url="/pages/eight/8-1">
						<uni-list-item title="8.1.调用网络接口在首页展示真实数据并渲染"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-2">
						<uni-list-item title="8.2.使用Promise封装request网络请求"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-3">
						<uni-list-item title="8.3.对封装的request请求进行传参"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-4">
						<uni-list-item title="8.4.给专题组件通过defineProps声明变量传值渲染"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-5">
						<uni-list-item title="8.5.使用ChatGPT AI辅助工具写JS工具方法并完成分类页面渲染"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-6">
						<uni-list-item title="8.6.调试分类列表接口将数据渲染到页面中"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-7">
						<uni-list-item title="8.7.从onLoad获取参数作为接口的参数获取对应的数据"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-8">
						<uni-list-item title="8.8.触底加载更多阻止无效的网络请求"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-9">
						<uni-list-item title="8.9.骨架屏和触底加载load-more样式的展现"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-10">
						<uni-list-item title="8.10.分类列表存入Storage在预览页面读取缓存展示"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-11">
						<uni-list-item title="8.11.通过swiper的事件实现真正的壁纸预览及切换"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-12">
						<uni-list-item title="8.12.(选学但重要)巧妙解决首次加载额外的图片网络消耗"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-13">
						<uni-list-item title="8.13.展示每张壁纸的专属信息"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-14">
						<uni-list-item title="8.14.对接评分接口对壁纸进行滑动提交打分"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-15">
						<uni-list-item title="8.15.通过本地缓存修改已评分过的状态"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-16">
						<uni-list-item title="8.16.saveImageToPhotosAlbum保存壁纸到相册"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-17">
						<uni-list-item title="8.17.openSetting调用客户端授权信息及各种异常处理"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-18">
						<uni-list-item title="8.18.try{}catch处理同步请求下载记录异常处理"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-19">
						<uni-list-item title="8.19.onShareAppMessage分享好友和分享微信朋友圈"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-20">
						<uni-list-item title="8.20.对分享页面传参进行特殊处理"></uni-list-item>
					</navigator>
					<navigator url="/pages/eight/8-21">
						<uni-list-item title="8.21.处理popup底部弹窗空缺安全区域及其他页面优化"></uni-list-item>
					</navigator>
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="第九章-其他功能页面实现">
				<uni-list>
					<navigator url="/pages/nine/9-1">
						<uni-list-item title="9.1.获取个人中心接口数据渲染到用户页面中"></uni-list-item>
					</navigator>
					<navigator url="/pages/nine/9-2">
						<uni-list-item title="9.2.共用分类列表页面实现我的下载和评分页面"></uni-list-item>
					</navigator>
					<navigator url="/pages/nine/9-3">
						<uni-list-item title="9.3.使用mp-html富文本插件渲染公告详情页面"></uni-list-item>
					</navigator>
					<navigator url="/pages/nine/9-4">
						<uni-list-item title="9.4.搜索页面布局及结合数据缓存展示搜索历史"></uni-list-item>
					</navigator>
					<navigator url="/pages/nine/9-5">
						<uni-list-item title="9.5.对接搜索接口预览搜索结果"></uni-list-item>
					</navigator>
					<navigator url="/pages/nine/9-6">
						<uni-list-item title="9.6.banner中navigator组件跳转到其他小程序及bug解决"></uni-list-item>
					</navigator>
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="第十章-多个常见平台的打包上线">
				<uni-list>
					<navigator url="/pages/ten/10-1">
						<uni-list-item title="10.1.打包发行微信小程序的上线全流程"></uni-list-item>
					</navigator>
					<navigator url="/pages/ten/10-2">
						<uni-list-item title="10.2.打包抖音小程序条件编译抖音专属代码"></uni-list-item>
					</navigator>
					<navigator url="/pages/ten/10-3">
						<uni-list-item title="10.3.打包H5并发布上线到unicloud的前端网页托管"></uni-list-item>
					</navigator>
					<navigator url="/pages/ten/10-4">
						<uni-list-item title="10.4.打包安卓APP并安装运行"></uni-list-item>
					</navigator>
					<navigator url="/pages/ten/10-5">
						<uni-list-item title="10.5.【完结撒花】项目总结和知识拓展"></uni-list-item>
					</navigator>
				</uni-list>
			</uni-collapse-item>

		</uni-collapse>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
	.page {
		.p {
			font-size: 28rpx;
			color: rgba(0, 0, 0, .55);
			margin-bottom: 36rpx;
		}
	}
</style>